<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html;">
    <title>jOrgChart - A jQuery OrgChart Plugin</title>
    <link rel="stylesheet" href="css/jquery.jOrgChart.css"/>
    <link rel="stylesheet" href="css/custom.css"/>
    <link rel="stylesheet" href="css/zTreeStyle.css"/>
    <!-- jQuery includes -->
    <script type="text/javascript" src="jquery.min.js"></script>
    <script type="text/javascript" src="jquery.ztree.core.js"></script>
    <script src="jquery.jOrgChart.js"></script>
  </head>

  <body onload="" >
    <div id="chart" class="orgChart" style="background:url('images/bkgd.png') repeat top left;">
      
    </div>
    <ul id="org"  class="ztree"></ul>
        
      </ul>
    <script>
        (function(){
          $.ajax({
            url:"http://localhost:8080/agent/all",
            type:"GET",
            dataType:"json",
            success:function(data){
              if(data!=null&&data.length!=0){
                var zNodes=data.agents;
                var setting={
                  view: {
                    },
                  data:{
                    key:{title:"name",name: "name"},
                    simpleData : {
                        enable : true,
                        idKey: "id",
                        rootPId: "0"
                    }
                  }
                }
                var zTreeObj = $.fn.zTree.init($("#org"), setting, zNodes);
                zTreeObj.expandAll(true);
                $("#org").jOrgChart({
                  chartElement : '#chart',
                  dragAndDrop  : true
                });
              }
              
              
            }
          })
        })();
    </script>

</body>
</html>